<template>
    <div class="chang-voice-box">
        <van-slider v-model="nowVoice"
                    @change="changeVoice"
                    :min="0"
                    :max="100" bar-height="4px" active-color="#ee0a24"/>
    </div>
</template>

<script>
import {onMounted, ref} from "vue";

export default {
    name: "changeVoiceBox",
    setup() {
        let nowVoice = ref(0.5)

        function changeVoice() {
            let audio = document.getElementsByTagName('audio')[0]
            audio.volume = (nowVoice.value/100)
        }

        onMounted(()=>{
            nowVoice.value = document.getElementsByTagName('audio')[0].volume * 100
        })

        return {
            nowVoice,
            changeVoice
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../../style";

.chang-voice-box {
    .inner-pos(center);
    margin: 10px;
    padding: 5px 25px 5px 25px;
    width: 300px;
    height: 50px;
    bottom: 71px;
    right: 0;
    position: absolute;
    background-color: rgb(52, 51, 50);
    border-radius: 5px;
}
</style>